<template>
  <div class="app-container">
    <el-form :inline="true" ref="ruleForm" :model="formInline" class="demo-form-inline">
      <el-form-item label="帐变时间" prop="time">
        <el-date-picker
          v-model="formInline.time"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerWeekStep">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="代理账户名" prop="proxyUserName">
        <el-input v-model="formInline.proxyUserName" placeholder="请输入关键词" @keyup.enter.native="$emit('on-filter',formInline)"></el-input>
      </el-form-item>
      <!--<el-form-item label="账户类型" prop="userType">-->
        <!--<el-select v-model="formInline.userType" placeholder="请选择账户类型">-->
          <!--<el-option-->
            <!--v-for="item in consts.ACCOUNT_TYPE"-->
            <!--:label="item.title"-->
            <!--:key="item.value"-->
            <!--:value="item.value"-->
          <!--&gt;</el-option>-->
        <!--</el-select>-->
      <!--</el-form-item>-->
      <el-form-item label="代充/授信账变类型" prop="optType">
        <el-select v-model="formInline.optType" placeholder="请选择代充/授信账变类型">
          <el-option
            v-for="item in consts.SPLIT_CHANGE"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-button class="filter-item"
                 type="primary"
                 :loading="loading"
                 icon="el-icon-search"
                 @click="$emit('on-filter',formInline)">搜索
      </el-button>
      <el-button v-if="roleCheck('export')" class="filter-item" type="primary" icon="el-icon-download" @click="exportHandle">导出</el-button>
      <el-button @click="selfResetForm('ruleForm')">重置</el-button>
    </el-form>
  </div>

</template>

<script>
import { exportMembersAllRecordList } from '@/services/api/member';
import { form, grid, pickerOption } from '@/build';

export default {
  name: 'form-filter',
  mixins: [form, grid, pickerOption],
  data() {
    return {
      formInline: {
        time: [moment().startOf('isoWeek').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')],
        proxyUserName: undefined,
        // userType: 1,//0-会员，1-代理
        optType: -1,
      },
    };
  },
  methods: {
    selfResetForm(formName) {
      this.resetForm(formName);
      this.$emit('on-filter', this.formInline);
    },
    // 导出
    exportHandle() {
      const { proxyUserName, optType } = this.formInline;
      const maintainTime = this.formInline.time;
      let startDate; let
        endDate;
      if (!_.isUndefined(maintainTime) && _.isArray(maintainTime)) {
        startDate = maintainTime[0];
        endDate = maintainTime[1];
      }
      const ajaxData = {
        startDate, endDate, proxyUserName, optType,
      };
      const filename = '上分汇总记录.csv';
      const header = ['代充/授信变更时间', '代理账户名', '代充/授信账变类型', '变更金额', '上分变额前', '上分变额后'];
      const filterField = ['createTime', 'proxyUserName', 'optType', 'changeAmount', 'creditedAmountBefore', 'creditedAmountAfter'];
      exportMembersAllRecordList(ajaxData).then(([result, data]) => {
        if (result) {
          const exportData = this.responseFormatter(data.list);
          this.export2Excel(header, filterField, exportData, filename);
        } else {
          this.$message({ message: `导出失败,${data.message}`, type: 'warning' });
        }
      });
    },
    responseFormatter(data) {
      const endData = [];
      data.forEach((item) => {
        endData.push({
          createTime: _.toTime(item.createTime),
          proxyUserName: item.proxyUserName,
          optType: item.optType,
          changeAmount: _.currency(item.changeAmount),
          creditedAmountBefore: _.currency(item.creditedAmountBefore),
          creditedAmountAfter: _.currency(item.creditedAmountAfter),
        });
      });
      return endData;
    },
  },
  mounted() {

  },
};
</script>

<style lang="scss" scoped>
  .with-pre-select {
    .el-input-group__prepend {
      .el-select {
        width: 160px;
      }
    }
  }

  .money-range {
    .el-input {
      width: 100px;
    }
  }

</style>
